<template>
  <el-card v-loading="chartLoading" class="box-card" :class="['is-'+position]">
    <async-component v-if="!chartLoading" ref="bannerCom" v-bind="previewData" :banner-data="bannerData" />
  </el-card>
</template>

<script>
import AsyncComponent from '@admin/packages/async-component/src/main'
export default {
  components: { AsyncComponent },
  props: {
    chartSetting: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      bannerData: {},
      chartLoading: true
    }
  },
  computed: {
    previewData: function() {
      return this.chartSetting.content
    },
    position: function() {
      return 'top'
    },
  },
  mounted: function() {
  },
  methods: {
    setChartData(data, info) {
      this.bannerData = {
        oriData: data,
        oriInfo: info
      }
      this.chartLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  ::v-deep .el-card__body{
    padding: 10px 20px;
  }
  &.is-top{
    margin-bottom: 5px;
  }
  &.is-bottom{
    margin-top: 5px;
  }
}
</style>
